// 获取 DOM 元素
const placeInput = document.getElementById("placeInput");
const searchBtn = document.getElementById("searchBtn"); // 查找按钮
const confirmBtn = document.getElementById("confirmBtn"); // 确认按钮
const imageContainer = document.getElementById("imageContainer");
const backBtn = document.getElementById("backBtn");

// 模拟地点与图片映射关系
const placeImageMap = {
  敦煌莫高窟: "https://picsum.photos/id/1036/800/800",
  北京故宫: "https://picsum.photos/id/1037/800/800",
  西安兵马俑: "https://picsum.photos/id/1038/800/800",
  长城: "https://picsum.photos/id/1039/800/800",
  西湖: "https://picsum.photos/id/1040/800/800",
};

// 返回按钮功能
backBtn.addEventListener("click", () => {
  window.history.back();
});

// 输入框回车键触发查找
placeInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    searchBtn.click(); // 回车触发查找
  }
});

// 【查找按钮】点击显示图片
searchBtn.addEventListener("click", () => {
  const inputValue = placeInput.value.trim();

  if (inputValue === "") {
    shakeElement(placeInput); // 输入为空时抖动提示
    return;
  }

  // 显示加载状态
  searchBtn.disabled = true;
  searchBtn.textContent = "查找中...";
  imageContainer.innerHTML =
    '<p style="color: #666; font-size: 1.2rem;">正在加载图片...</p>';

  // 模拟网络延迟
  setTimeout(() => {
    const imageUrl =
      placeImageMap[inputValue] ||
      `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/800/800`;

    const img = document.createElement("img");
    img.src = imageUrl;
    img.alt = inputValue;
    img.style.display = "block";

    img.onload = () => {
      imageContainer.innerHTML = "";
      imageContainer.appendChild(img);
      searchBtn.disabled = false;
      searchBtn.textContent = "查找";
    };

    img.onerror = () => {
      imageContainer.innerHTML =
        '<p style="color: #f00; font-size: 1.2rem;">图片加载失败，请重试</p>';
      searchBtn.disabled = false;
      searchBtn.textContent = "查找";
    };
  }, 800);
});

// 【确认按钮】点击切换页面
confirmBtn.addEventListener("click", () => {
  const inputValue = placeInput.value.trim();

  if (inputValue === "") {
    shakeElement(placeInput); // 输入为空时抖动提示
    return;
  }

  // 切换到目标页面（替换为实际页面路径）
  window.location.href = `../html/厦门地图.html`;
});

// 输入框抖动动画
function shakeElement(element) {
  element.style.animation = "shake 0.5s";
  setTimeout(() => {
    element.style.animation = "";
  }, 500);
}

// 抖动动画样式
const style = document.createElement("style");
style.textContent = `
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
  }
`;

document.head.appendChild(style);
// 等待整个HTML文档加载完毕后再执行脚本
document.addEventListener("DOMContentLoaded", function () {
  // 获取页面上的元素
  const placeInput = document.getElementById("placeInput");
  const searchBtn = document.getElementById("searchBtn");
  const confirmBtn = document.getElementById("confirmBtn"); // 如果需要的话
  const imageContainer = document.getElementById("imageContainer");

  // 为“查找”按钮添加点击事件监听器
  searchBtn.addEventListener("click", function () {
    // 1. 获取输入框中的文本内容，并去除首尾空格
    const location = placeInput.value.trim();

    // 2. 检查输入是否为空
    if (location === "") {
      alert("请输入一个地点！"); // 提示用户
      return; // 结束函数执行
    }

    // 3. 调用函数将数据发送到后端
    sendDataToBackend(location);
  });

  // （可选）为“确定”按钮也添加类似逻辑
  confirmBtn.addEventListener("click", function() {
    // ... 类似逻辑 ...
    // 1. 获取输入框中的文本内容，并去除首尾空格
    const location = placeInput.value.trim();

    // 2. 检查输入是否为空
    if (location === "") {
      alert("请输入一个地点！"); // 提示用户
      return; // 结束函数执行
    }

    // 3. 调用函数将数据发送到后端
    sendDataToBackend(location);
  });


  /**
   * 使用 fetch API 将数据发送到Python后端
   * @param {string} placeName - 用户输入的地点名称
   */
  async function sendDataToBackend(placeName) {
    // 定义后端API的URL，请确保端口号与你的Python后端匹配
    const backendUrl = "http://127.0.0.1:5000/process_location";

    console.log(`准备发送数据到后端: ${placeName}`);
    imageContainer.innerHTML = `<p>正在查找 "${placeName}" 相关信息...</p>`; // 给用户一个反馈

    try {
      // 4. 发起一个POST请求
      const response = await fetch(backendUrl, {
        method: "POST", // 请求方法
        headers: {
          "Content-Type": "application/json", // 告诉后端我们发送的是JSON数据
        },
        body: JSON.stringify({ location: placeName }), // 将数据转换为JSON字符串
      });

      // 5. 检查后端响应是否成功 (HTTP状态码 200-299)
      if (!response.ok) {
        // 如果后端返回错误（如404, 500等）
        throw new Error(`后端响应错误: ${response.status} ${response.statusText}`);
      }

      // 6. 解析后端返回的JSON数据
      const result = await response.json();

      // 7. 处理后端返回的数据
      console.log("从后端收到的数据:", result);
      // 假设后端返回一个包含图片URL的数组
      // 例如: { "message": "处理成功", "images": ["url1.jpg", "url2.jpg"] }
      updateImageContainer(result.images);

    } catch (error) {
      // 捕获网络错误或解析错误
      console.error("发送数据到后端时出错:", error);
      imageContainer.innerHTML = `<p style="color: red;">查找失败，请稍后再试。</p>`;
    }
  }

  /**
   * 根据后端返回的图片URL更新页面
   * @param {string[]} imageUrls - 图片链接数组
   */
  function updateImageContainer(imageUrls) {
      if (!imageUrls || imageUrls.length === 0) {
          imageContainer.innerHTML = `<p>未找到相关图片。</p>`;
          return;
      }

      // 先清空之前的内容
      imageContainer.innerHTML = "";

      // 遍历图片URL数组，为每个URL创建一个img元素并添加到容器中
      imageUrls.forEach(url => {
          const img = document.createElement("img");
          img.src = url;
          img.alt = "地点图片";
          img.className = "result-image"; // 可以给图片加个class方便设置样式
          imageContainer.appendChild(img);
      });
  }
});